function method2 () {
  (function () {
    var paint = {
      init: function () {
        var shield = document.getElementById('canvas')
        shield.addEventListener('touchstart', function (e) {
          e.stopPropagation()
          e.preventDefault()
        }, false)
        this.load()
      },
      load: function () {
        this.x = []// 记录鼠标移动是的X坐标
        this.y = []// 记录鼠标移动是的Y坐标
        this.clickDrag = []
        this.lock = false// 鼠标移动前，判断鼠标是否按下
        this.isEraser = false
        this.storageColor = '#EEAAEE'
        this.strokeStyle2 = '选择颜色'
        this.eraserRadius = 5// 擦除半径值
        this.color = ['#EEAAEE', '#FF0000', '#80FF00', '#00FFFF', '#808080', '#FF8000', '#408080', '#8000FF', '#CCCC00']// 画笔颜色值
        this.fontWeight = [2, 5, 8]
        this.$ = function (id) {
          return typeof id === 'string' ? document.getElementById(id) : id
        }
        this.canvas = this.$('canvas')
        if (this.canvas.getContext) {
        } else {
          alert('您的浏览器不支持 canvas 标签')
          return
        }
        this.cxt = this.canvas.getContext('2d')
        this.cxt.lineJoin = 'round'// context.lineJoin - 指定两条线段的连接方式
        this.cxt.lineWidth = 5// 线条的宽度
        this.iptClear = this.$('clear') // 清除画布
        // this.revocation = this.$('revocation')
        this.imgurl = this.$('imgurl')// 图片路径按钮
        this.w = this.canvas.width// 取画布的宽
        this.h = this.canvas.height// 取画布的高
        this.touch = ('createTouch' in document)// 判定是否为手持设备
        this.StartEvent = this.touch ? 'touchstart' : 'mousedown'// 支持触摸式使用相应的事件替代
        this.MoveEvent = this.touch ? 'touchmove' : 'mousemove'
        this.EndEvent = this.touch ? 'touchend' : 'mouseup'
        // this.saveImg = this.$('saveImg') // 保存图片
        // console.log('this.canvas', this.canvas)
        this.bind()
      },
      bind: function () {
        var t = this
        /* 清除画布 */
        this.iptClear.onclick = function () {
          t.clear()
        }
        // // 保存图片
        // this.saveImg.onclick = function () {
        //   t.pageLoaded()
        // }
        // 29/265
        /* 鼠标按下事件，记录鼠标位置，并绘制，解锁lock，打开mousemove事件 */
        this.canvas['on' + t.StartEvent] = function (e) {
          var touch = t.touch ? e.touches[0] : e
          var _x = touch.clientX - touch.target.offsetLeft - 28// 鼠标在画布上的x坐标，以画布左上角为起点
          var _y = (touch.clientY - 195) - touch.target.offsetTop// 鼠标在画布上的y坐标，以画布左上角为起点
          // console.log('按下_e', e)
          // console.log('按下_touch', touch)
          // console.log('按下_x', _x, '    按下_y', _y)
          if (t.isEraser) {
            t.cxt.globalCompositeOperation = 'destination-out'
            t.cxt.beginPath()
            t.cxt.arc(_x, _y, t.eraserRadius, 0, Math.PI * 2)
            t.cxt.strokeStyle = 'rgba(250,250,250,0)'
            t.cxt.fill()
            t.cxt.globalCompositeOperation = 'source-over'
            t.resetEraser(_x, _y, touch)
          } else {
            t.movePoint(_x, _y)// 记录鼠标位置
            t.drawPoint()// 绘制路线
          }
          t.lock = true
        }
        /* 鼠标移动事件 */
        this.canvas['on' + t.MoveEvent] = function (e) {
          var touch = t.touch ? e.touches[0] : e
          if (t.lock) { // t.lock为true则执行
            var _x = touch.clientX - touch.target.offsetLeft - 28// 鼠标在画布上的x坐标，以画布左上角为起点
            var _y = (touch.clientY - 195) - touch.target.offsetTop// 鼠标在画布上的y坐标，以画布左上角为起点
            // console.log('移动_e', e)
            // console.log('移动_x', _x, '    移动_y', _y)
            if (t.isEraser) {
              t.resetEraser(_x, _y, touch)
            } else {
              t.movePoint(_x, _y, true)// 记录鼠标位置
              t.drawPoint()// 绘制路线
            }
          }
        }
        this.canvas['on' + t.EndEvent] = function (e) {
          /* 重置数据 */
          t.lock = false
          t.x = []
          t.y = []
          t.clickDrag = []
          clearInterval(t.Timer)
          t.Timer = null
        }
        this.changeColor()

        /* 橡皮擦 */
        this.$('eraser').onclick = function (e) {
          t.isEraser = true
        }
        this.$('widthClick').onclick = function (e) {
          // console.log(t.cxt.strokeStyle2)
          t.cxt.strokeStyle = t.cxt.strokeStyle2
          t.isEraser = false
        }
      },
      movePoint: function (x, y, dragging) {
        /* 将鼠标坐标添加到各自对应的数组里 */
        this.x.push(x)
        this.y.push(y)
        this.clickDrag.push(y)
      },
      drawPoint: function (x, y, radius) {
        for (var i = 0; i < this.x.length; i++) { // 循环数组
          this.cxt.beginPath()// context.beginPath() , 准备绘制一条路径
          if (this.clickDrag[i] && i) { // 当是拖动而且i!=0时，从上一个点开始画线。
            this.cxt.moveTo(this.x[i - 1], this.y[i - 1])// context.moveTo(x, y) , 新开一个路径，并指定路径的起点
          } else {
            this.cxt.moveTo(this.x[i] - 1, this.y[i])
          }
          this.cxt.lineTo(this.x[i], this.y[i])// context.lineTo(x, y) , 将当前点与指定的点用一条笔直的路径连接起来
          this.cxt.closePath()// context.closePath() , 如果当前路径是打开的则关闭它
          this.cxt.stroke()// context.stroke() , 绘制当前路径
        }
      },

      changeColor: function () {
        /* 为按钮添加事件 */
        var t = this
        // 设置默认画笔颜色
        t.cxt.strokeStyle = '#EEAAEE'
        t.cxt.strokeStyle2 = '#EEAAEE'
        var iptNum = this.$('color').getElementsByTagName('input')
        var fontIptNum = this.$('fonter').getElementsByTagName('img')
        var fonterEraser = this.$('fonterEraser').getElementsByTagName('img')
        for (var i = 0, l = iptNum.length; i < l; i++) {
          iptNum[i].index = i - 1
          iptNum[i].onclick = function () {
            t.cxt.strokeStyle = t.color[this.index]
            t.cxt.strokeStyle2 = t.cxt.strokeStyle
            t.isEraser = false
          }
        }
        // eslint-disable-next-line no-redeclare
        for (var i = 0, l = fontIptNum.length; i < l; i++) {
          fontIptNum[i].index = i
          fontIptNum[i].onclick = function () {
            t.cxt.lineWidth = t.fontWeight[this.index]
            t.isEraser = false
          }
        }
        // eslint-disable-next-line no-redeclare
        for (var i = 0, l = fonterEraser.length; i < l; i++) {
          fonterEraser[i].index = i
          fonterEraser[i].onclick = function () {
            // console.log('fontIptNum', this.index)
            if (this.index === 0) {
              t.eraserRadius = 5
            }
            if (this.index === 1) {
              t.eraserRadius = 10
            }
            if (this.index === 2) {
              t.eraserRadius = 15
            }
            t.isEraser = true
          }
        }
      },
      // 清除画布
      clear: function () {
        console.log('清除')
        this.cxt.clearRect(0, 0, this.w, this.h)// 清除画布，左上角为起点
      },
      // 橡皮擦
      resetEraser: function (_x, _y, touch) {
        console.log('橡皮擦')
        var t = this
        /* source-over 默认,相交部分由后绘制图形的填充(颜色,渐变,纹理)覆盖,全部浏览器通过 */
        t.cxt.beginPath()
        t.cxt.arc(_x, _y, t.eraserRadius, 0, Math.PI * 2)
        t.cxt.fill()
      }

      // // 上传
      // pageLoaded: function () {
      //   var data = this.canvas.toDataURL('image/png')
      //   console.log('上传', data)
      //   // eslint-disable-next-line no-undef
      //   $.ajax({
      //     url: 'api/savepicture.php',
      //     type: 'post',
      //     data: { img: data },
      //     success: function (data) {
      //       alert('图片保存成功')
      //     },
      //     error: function (data) {
      //       alert('图片保存失败')
      //     }
      //   })
      // }
    }
    paint.init()
  })()
}
function changeColors () {
  console.log('enter change color')
  var color = document.getElementsByName('color')
  var canvas = document.getElementById('canvas')
  var cxt = canvas.getContext('2d')
  cxt.strokeStyle = color[0].value
}
export { // 很关键
  method2,
  changeColors
}
